<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟hh</title>
</head>

<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落1</p>

<div id="dv1">
    <p id="p1">子段落p1</p>
</div>

<p id="demo2">------</p>
<p id="demo3">==========</p>

<script>
{
    //构造新的段落
    var p = document.createElement("p")
    var node = document.createTextNode("字段落po09922")   //内容
    p.appendChild(node)

    //插入父节点
    var e = document.getElementById("dv1")
    e.appendChild(p)

    //将新元素添加到开始位置，可以使用 insertBefore() 方法
    p1 = document.getElementById("p1")
    e.insertBefore(p, p1)   //p1前面

    //删除段落
    //e.removeChild(p)

    //使用 replaceChild() 方法来替换 HTML DOM 中的元素
    //e.replaceChild(p, p1)

    var demo2 = document.getElementById("demo2")
    ps = document.getElementsByTagName("p")
    demo2.innerHTML = "共有"+ps.length+"个段落,第3个段落:"+ps[2].innerHTML

    //修改所有 <p> 元素的背景颜色
    for (i = 0; i < ps.length; i++) {
        ps[i].style.color = "red"
    }
}

{
    var demo = document.getElementById("demo3")
    //获取 <p> 元素的集合(节点列表不是一个数组！)
    var ps = document.querySelectorAll("p")
    demo.innerHTML = "共有"+ps.length+"个段落,第2个段落:"+ps[1].innerHTML
}

</script>

</body>
</html>

